                      <!-- 开启盲盒信息 -->

<template>
	<view class="save-info" >
		
		
		<view class="online-status flex" >
			<view class="info">
				<view class="h3">您正在盲盒之中..</view>
				<view class="p">还剩 {{count }} 次可开启异性盲盒的机会~</view>
			</view>
			<image src="https://edu-myoss.oss-cn-guangzhou.aliyuncs.com/manghe/img/img_123.png" mode="heightFix"></image>
		</view>
			  
      
			<view class="sp-view">
				<view class="save-title">请选择您想要匹配的性别<text>❥</text></view>
				<view class="gender flex">
					<view class="item" :class="blind_sex == 1 ? 'active' : ''" @click="sexChange(1)">
						<image src="../../static/img/head_boy.png" mode="widthFix"></image>男生
					</view>
					<view class="item" :class="blind_sex == 2 ? 'active' : ''" @click="sexChange(2)">
						<image src="../../static/img/head_girl.png" mode="widthFix"></image>女生
					</view>
				</view>
			</view>
      
			<view class="sp-view" style="margin-top:40rpx;" v-if="!showMoreInfo">
				<!-- <a class="showMoreInfo" @tap="showMoreInfo = true;">点我填写更多信息，让对象更好的找到你~</a> -->
			</view>

			<view class="online-status flex" style="background:#effaff;">
					<view class="info">
						<!-- <navigator class="btn" :url="'/pages/test3/test3?blind_sex='+ blind_sex" @click="selectBlind_sex()">开启盲盒</navigator> -->
            <view class="btn"  @click="delayNavigate()">开启盲盒</view>
					</view>
					<image src="../../static/img/bg_gift_fly.png" mode="heightFix"></image>
				</view>
				
        
			<!-- 	<view class="btn disabled" v-if="info.blind_status.is_blind == 0">等待审核中</view>
				<view class="btn" @tap.stop="unSave">下架我的盲盒</view> -->
			
		<!-- <pay-code ref="pay-code" @call="payCodeCall"></pay-code> -->
	</view>
</template>

<script>
  import {  mapGetters,mapMutations,mapState } from 'vuex'
	export default {
		data() {
			return {  
        btn : false,
        getCouldUser : {
    
         },
         acount : 0,
        dddown : true,
				// systemInfo: uni.getSystemInfoSync(),
				// showMoreInfo:false,
				// info:null, //基本信息
				//用户需要输入的信息
					// wechat_number:"",
					// // interest:[],
					// introduction:"",
					// phone_number:"",
					blind_sex: 2,
					// photos:[],
				
			}
		},onLoad() {
      this.btn = false
		  this.getUserCount()
      
		},
		computed:{
	  ...mapState('m_user', ['token','count','tokenTime']),
     
		
		},
		methods: {		
          ...mapMutations('m_user', ['updatCount','updatTokenTime','updatCount01']),  
      selectBlind_sex(){
        if(this.blind_sex===''){
          console.log('请选择要抽取的性别')
        }
      },
			//性别选择
			sexChange(sex){
				// if(this.disabled){
				// 	return;
				// }
				this.blind_sex = sex;
			},			
  // 展示倒计时的提示消息
      showTips1(n) {
        // 调用 uni.showToast() 方法，展示提示消息
        uni.showToast({
          // 不展示任何图标
          icon: 'none',
          // 提示的消息
          title: '今日盲盒开启次数已用完！',
          // title: name,
          // 为页面添加透明遮罩，防止点击穿透
          mask: true,
          // 1.5 秒后自动消失
          duration: 1500
        })
      },
      // 展示倒计时的提示消息
      showTips2(n) {
        // 调用 uni.showToast() 方法，展示提示消息
        uni.showToast({
          // 不展示任何图标
          icon: 'none',
          // 提示的消息
          title: '正在为您随机开启盲盒中，请等待(' + n + ')秒',
          // title: name,
          // 为页面添加透明遮罩，防止点击穿透
          mask: true,
          // 1.5 秒后自动消失
          duration: 1500
        })
      },
      // 延迟导航到 my 页面
      delayNavigate() {
        if(this.btn == true){
          uni.showToast({
            title:"已开启过盲盒，请返回主页面重新抽取！",
            duration:1000,
            icon: 'none'
          })
          return
        }
        this.btn = true
      
         if(this.count <= 0){
           // 把 data 中的秒数重置成 3 秒,在执行此方法时，立即将 seconds 秒数重置为 3 即可
             this.seconds = 1
           // 1. 展示提示消息，此时 seconds 的值等于 3
           this.showTips1(1.5)
                 
           // 2. 创建定时器，每隔 1 秒执行一次
           // 1. 将定时器的 Id 存储到 timer 中
            this.timer = setInterval(() => {
             // 2.1 先让秒数自减 1
             this.seconds--
             // 2. 判断秒数是否 <= 0
             if (this.seconds <= 0) {
            // 2.1 清除定时器
               clearInterval(this.timer)
               // 2.2 跳转到 my 页面
                     uni.navigateTo({
                       url: '/pages/index/index' 
                         // 页面跳转成功之后的回调函数
                     //     success: () => {
                     //   // 调用 vuex 的 updateRedirectInfo 方法，把跳转信息存储到 Store 中
                     //     this.updateRedirectInfo({
                     // // 跳转的方式
                     //     openType: 'switchTab',
                     // // 从哪个页面跳转过去的
                     //      from: '/pages/cart/cart'
                     //             })
                     //           }
                     })     
                // 2.3 终止后续代码的运行（当秒数为 0 时，不再展示 toast 提示消息）
                 return
               }
             // 2.2 再根据最新的秒数，进行消息提示
             this.showTips1(this.seconds)
           }, 1000)
           }
           else       
          {
          // 把 data 中的秒数重置成 3 秒,在执行此方法时，立即将 seconds 秒数重置为 3 即可
            
              
    
           this.updatCount(this.count - 1)
            
            
            
           
            this.seconds = 3
          // 1. 展示提示消息，此时 seconds 的值等于 3
          this.showTips2(this.seconds)
                
          // 2. 创建定时器，每隔 1 秒执行一次
          // 1. 将定时器的 Id 存储到 timer 中
           this.timer = setInterval(() => {
            // 2.1 先让秒数自减 1
            this.seconds--
            // 2. 判断秒数是否 <= 0
            if (this.seconds <= 0) {
              
           // 2.1 清除定时器
              clearInterval(this.timer)
              // 2.2 跳转到 my 页面
                    uni.navigateTo({
                      url: '/pages/test3/test3?blind_sex=' + this.blind_sex
                        // 页面跳转成功之后的回调函数
                    //     success: () => {
                    //   // 调用 vuex 的 updateRedirectInfo 方法，把跳转信息存储到 Store 中
                    //     this.updateRedirectInfo({
                    // // 跳转的方式
                    //     openType: 'switchTab',
                    // // 从哪个页面跳转过去的
                    //      from: '/pages/cart/cart'
                    //             })
                    //           }
                    })     
               // 2.3 终止后续代码的运行（当秒数为 0 时，不再展示 toast 提示消息）
                return
              }
            // 2.2 再根据最新的秒数，进行消息提示
            this.showTips2(this.seconds)
          }, 1000)
          
      
      }
      },
      
       //根据传入的openid获取云数据库的用户可使用的抽取次数    86400
       getUserCount(){ 
        var newTime = new Date().getTime() + '';
        var intnewTime = parseInt(newTime.substr(0,10))    
        console.log('相差时间',intnewTime - this.tokenTime )
        if(intnewTime - this.tokenTime >= 86400 ){ 
          uniCloud.callFunction({
                     name:'getUserCount',
                     data: {"token": this.token},        
                     success:(e)=> {          
                       this.getCouldUser = e.result.data[0]
                   
           if(e.result.data[0].
           token == this.token){
             this.updatCount(this.count + 3 )
             this.updatTokenTime(intnewTime)
             
             }
             }
              })  
              }
              else{
               console.log('this.token',this.token)
                uniCloud.callFunction({
                          
                           name:'getUserCount',
                           data: {"token": this.token},        
                           success:(e)=> {   
                           console.log('e.result.data[0]=========',e.result.data[0])
                            this.getCouldUser = e.result.data[0]
                             this.updatCount(e.result.data[0].count + this.count)
                             this.updataUserCount(this.getCouldUser )        
                   }             
                    })                  
              } 
              
              

       },
       updataUserCount(getCouldUser ){
           getCouldUser.count =  0
           // console.log('this.getCouldUser',this.getCouldUser)
           uniCloud.callFunction({
                      name:'updataUserCount',
                      data: getCouldUser, 
                      success:(e)=> {   
                  console.log("修改次数成功")
                 
              }
               })   
         
        
       },
       //测试时间到期
        
			
		
				
				
		
		},
		mounted(){
			// this.getData();
		},
	}
</script>

<style lang="scss" scoped>
	.save-info{
		min-height:100vh;
		background:#FFF;
		padding:20rpx 40rpx;
		.online-status{
      height: 400rpx;
			background:#fff6f6;
			flex-direction: row;
			align-items: center;
			margin:0 -20rpx;
			padding:30rpx 50rpx;
			border-radius:10rpx;
			.info{
				flex:1;
				width:0;
				.h3{
					font-weight:bold;
					font-size:32rpx;
					line-height:50rpx;
				}
				.p{
					color:#999;
					font-size:28rpx;
					line-height:50rpx;
					margin-top:10rpx;
				}
			}
			image{
				height:150rpx;
			}
		}
		.sp-view{
			margin-top:55rpx;
			.save-title{
				font-size:28rpx;
				line-height:50rpx;
        color: #ffa7c3;
				// font-weight:bold;
				text{
					margin-left:12rpx;
					font-size:30rpx;
					color:#F30;
				}
			}
			.gender{
				flex-direction: row;
				margin-top:30rpx;
				.item{
					flex:1;
					width:0;
					font-size:28rpx;
					color:#707070;
					text-align: center;
					&.active{
						color:$background;
						font-weight:bold;
					}
					image{
						display: block;
						margin:0 auto;
						width:140rpx;
						margin-bottom:20rpx;
					}
				}
			}
			.input{
				font-size:28rpx;
				line-height:60rpx;
				padding:15rpx 30rpx;
				height:90rpx;
				border-radius:10rpx;
				border:1px solid #F1F1F1;
				display: block;
				margin-top:25rpx;
			}
			.textarea{
				position:relative;
				padding:20rpx 30rpx;
				border-radius:10rpx;
				border:1px solid #F1F1F1;
				margin-top:25rpx;
				textarea{
					font-size:28rpx;
					line-height:50rpx;
					height:170rpx;
					display: block;
					width:100%;
				}
				.photos{
					flex-direction: row;
					flex-wrap: wrap;
					margin-top:26rpx;
					margin-bottom:-10rpx;
					.item{
						margin-right:22rpx;
						margin-bottom:22rpx;
						width:calc((750rpx - 44rpx - 80rpx) / 4);
						height:120rpx;
						border-radius:10rpx;
						overflow:hidden;
						&:nth-child(3n){
							margin-right:0;
						}
						image{
							display:block;
							width:100%;
							height:100%;
						}
					}
				}
			}
			.tag{
				margin-top:30rpx;
				flex-direction: row;
				flex-wrap: wrap;
				margin-bottom:-25rpx;
				text{
					border:2rpx solid #d5d5d5;
					color:#4e4e4e;
					margin-right:25rpx;
					margin-bottom:25rpx;
					width:calc((100% - 50rpx) / 3);
					display:block;
					line-height:70rpx;
					text-align:center;
					border-radius:100rpx;
					font-size:28rpx;
					&.active{
						border:2rpx solid #7a57ff;
						color:#7a57ff;
					}
					&:nth-child(3n){
						margin-right:0;
					}
				}
			}
			.showMoreInfo{
				color:#b7b7b7;
				font-size:28rpx;
				line-height:35rpx;
				text-align:center;
				display: block;
			}
		}
		.btn{
			width:80%;
			background:$bodyBackgroundLine;
			color:#FFF;
			font-weight:bold;
			font-size:32rpx;
			margin:0 auto;
			margin-top:60rpx;
			margin-bottom:40rpx;
			line-height:100rpx;
			text-align:center;
			border-radius:100rpx;
			&:active{
				opacity: 0.8;
			}
			&.disabled{
				background: #eeeeee;
				color: #878787;
			}
		}
	}
</style>
